<template>
  <div style="width:98%;margin-left:1%;margin-top:2%;display:block">
    <a-table bordered :dataSource="dataSource" :columns="columns"  :scroll="{ x:1850,y:532 }">
      <template slot="operation" slot-scope="text, record">
        <div class='editable-row-operations'>
          <a @click="() => onSend(record.key)" :visibility="visible">发货</a>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
  import EditableCell from '@/components/cell.vue';
  import moment from 'moment';
import { mapActions , mapState} from 'vuex'
  /*
  * EditableCell Code https://github.com/vueComponent/ant-design-vue/blob/master/components/table/demo/EditableCell.vue
  */
  export default {
    components: {
      EditableCell,
    },
  computed: {
    ...mapState({
      signIn: state => state.account.signIn,
      account: state => state.account.account
    })
  },
    data() {
      return {
        visible: true,
        signData: [],
        mulData: [],
        dataSource: [
        ],
        count: 0,
        columns: [
          {
            title: '举报编号',
            dataIndex: 'report_id',
            width: '150',
            scopedSlots: { customRender: 'report_id' },
          },
          {
            title: '举报者账号',
            dataIndex: 'reporter_id',
            width: '150',
            scopedSlots: { customRender: 'reporter_id' },
          },
          {
            title: '被举报者姓名',
            dataIndex: 'reportee_id',
            width: '150',
            scopedSlots: { customRender: 'reportee_id' },
          },
          {
            title: '举报时间',
            dataIndex: 'report_time',
            width: '150',
            scopedSlots: { customRender: 'report_time' },
          },
          {
            title: '举报类型',
            dataIndex: 'type',
            width: '150',
            scopedSlots: { customRender: 'type' },
          },
          {
            title: '具体内容',
            dataIndex: 'content',
            width: '150',
            scopedSlots: { customRender: 'content' },
          },
          {
            title: '操作',
            dataIndex: 'operation',
            width: '150',
            scopedSlots: { customRender: 'operation' },
            fixed: 'right',
          },
        ],
        fields:['report_id','reporter_id','reportee_id','report_time','type','content'],
       rules: {
         report_id: {
            rules: [{
              required: true,
            }],
          },
          reporter_id:{
             rules: [{
              required: true,
            }],
          },
          reportee_id: {
            rules: [{
              required: true,
            }],
          },
         report_time: {
            rules: [{
              required: true,
            }],
          },
          type: {
            rules: [{
              required: true,
            }],
          },
          content: {
            rules: [{
              required: true,
            }],
          },
       }
      };
    },
    methods: {
      ...mapActions({
      getReportList: 'report/getReportList',
      ignoreReport: 'report/ignoreReport',
      delAndBlockReport: 'report/delAndBlockReport',
      delReport: 'report/delReport',
      }),
      moment,
      onSend(key){
        const dataSource = [...this.dataSource];
        // 过滤移除当前项目
        this.dataSource = dataSource.filter(item => item.key !== key);
        let updateD = dataSource[key]
        this.updateOrder(updateD.order_id).then((res)=>{
          this.openNotification("OK","发货成功",res)
          this.count--
        },(error)=>{
          this.openNotification("NOK","发货失败",error)
        })
      },
      openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),

      });
    }
      // 点击提交
    },
    mounted(){
      if(this.signIn===false||this.account===null){
        this.openNotification("NOK","未登录","请先登录管理员账号!")
        this.$router.push("/mainPage/login")
      }
      else{
        this.getReportList().then((res)=>{
          console.log(res)
          if(res===null)
          {
            this.openNotification("OK","更新举报列表成功","暂无新的举报信息!")
          }
          else
          {
            let i = 0
            for(let item of res){
              item.key = i++
              item.report_time = this.$tool.ts2str(item.report_time.$date)
              this.dataSource.push(item);
            }
            this.count = this.dataSource.length
            this.openNotification("OK","更新举报列表成功","举报列表已更新!")
            console.log(this.dataSource)
          }
          
        }, (error) => {
          this.openNotification("NOK","更新举报列表失败",error)
        })
      }
    }

  };
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
  li {
    text-align: left;
  }
  pre {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #ccc;
  }
</style>
